import Dialog from '@/components/Dialog'
import { Form, Input,Select  } from 'antd'
import { useEffect, useState } from 'react';
import { addDept, editDept,getUserList } from '@/api/department'
const { Option } = Select;

export default function AddDept (props) {

    const [form] = Form.useForm();
    const [ formData, setFormData] = useState({
        code: '', // 部门编码
        introduce: '', // 部门介绍
        managerName: '', // 部门负责人名字
        name: '', // 部门名称
        pid: '', // 部分父级部门id
        id: null
    })
    const [userList, setUserList] = useState([])
    // 表单回显函数
    function showForm(values){
        Object.keys(formData).forEach(el => {
            form.setFieldValue(el, values[el])
        });
    }
    useEffect(()=>{
        if(!props.dialogVisible) { return}
        if(props.title === '添加子部门'){
            setFormData({
                ...formData,
                pid: props.formData.id
            })
        }else{
            let obj = {
                name: props.formData.title,
                code: props.formData.code,
                introduce: props.formData.introduce,
                managerName: props.formData.managerName,
                managerId: props.formData.managerId,
                id: props.formData.id,
                pid: props.formData.pid
            }
            setFormData(obj)
            showForm(obj)
        }
    },[props.dialogVisible]);
    useEffect(()=>{
        // 获取部门负责人列表
        try {
            getUserList().then(res=>{
                console.log(48,res)
                setUserList(res)
            })
        } catch (error) {
            
        }
    },[])


    return <Dialog visible={props.dialogVisible} title={props.title} cancel={() => {
        let obj = {
            code: '', // 部门编码
            introduce: '', // 部门介绍
            managerName: '', // 部门负责人名字
            name: '', // 部门名称
            pid: '', // 部分父级部门id
            id: null,
        }
        setFormData(obj)
        showForm(obj)
        props.close()
    }} confirm={ async() => {
        try {
            await form.validateFields();
            if(props.title === '添加子部门'){
                await addDept(formData)
            }else{
                await editDept(formData)
            }
            // 刷新列表
            props.refreshList()
            console.log('确定', formData)
            props.close()
        } catch (error) {
            console.log(error)
        }
    }}>
        <Form
            initialValues={{formData}}
            form={form}
            name="basic"
            autoComplete="off"
        >
            <Form.Item
                label="部门名称"
                name="name"
                rules={[
                    {
                        required: true,
                        min: 2,
                        max: 10,
                        message: '请输入部门名称且长度2到10位！',
                    },
                ]}
            >
                <Input placeholder='2-10个字符' onChange={(e)=>{
                    setFormData({
                        ...formData,
                        name: e.target.value
                    })
                }} />
            </Form.Item>

            <Form.Item
                label="部门编码"
                name="code"
                rules={[
                    {
                        required: true,
                        min: 2,
                        max: 10,
                        message: '请输入部门编码且长度2到10位',
                    },
                ]}
            >
                <Input placeholder='2-10个字符' onChange={(e)=>{
                    setFormData({
                        ...formData,
                        code: e.target.value
                    })
                }} />
            </Form.Item>
            <Form.Item
                label="部门负责人"
                name="managerId"
                rules={[
                    {
                        required: true,
                        message: '请输入部门负责人!',
                    },
                ]}
            >
                <Select placeholder='请选择负责人' onChange={(val)=>{
                    // console.log(149,e)
                    setFormData({
                        ...formData,
                        managerId: val
                    })
                }}>
                    { userList.map(item=>{
                        return <Option key={item.id} value={item.id}>{item.username}</Option>
                    }) }
                </Select>
            </Form.Item>
            <Form.Item
                label="部门介绍"
                name="introduce"
                rules={[
                    {
                        required: true,
                        min: 1,
                        max: 100,
                        message: '请输入部门介绍!',
                    },
                ]}
            >
                <Input.TextArea placeholder="1-100字符" onChange={(e)=>{
                    setFormData({
                        ...formData,
                        introduce: e.target.value
                    })
                }}  />
            </Form.Item>
        </Form>
    </Dialog>
}